<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS网页布局</title>
    <link rel="stylesheet" href="CSS/网页布局.css">

</head>
<body>
<!-- 顶部 -->
<div class="header">
    <div class="logo">
        <a href="网页布局.html">
            <img src="images/logo.png" alt="logo.png" >
        </a>
    </div>
    <div class="nav">
        <ul>
            <li><a href="">HOME</a></li>
            <li><a href="">ABOUT</a></li>
            <li><a href="">GALLERY</a></li>
            <li><a href="">FACULTY</a></li>
            <li><a href="">EVENTS</a></li>
            <li><a href="">CONTACT</a></li>
        </ul>
    </div>
</div>

<!-- 主体 -->
<div class="main">
    <div class="top">
        <img src="images/banner3.jpg" height="500" width="1265"/>
    </div>
    <!-- 遮罩层 -->
    <div class="topLayer">

    </div>
    <!-- 表单 -->
    <div class="banner">
        <div class="form">
            <input type="text" name="Name" style="background-color: transparent; margin-left: 55px;" value="your Name" ><br><br>
            <input type="text" name="Phone" style="background-color: transparent; margin-left: 55px;" value="your Phone"><br><br>
            <input type="text" name="Email" style="background-color: transparent; margin-left: 55px;" value="your Email"><br><br>
            <textarea style="background-color: transparent; margin-left: 55px;" value="Write Your Comment Here">Write Your Comment Here
            </textarea>
            <button>SEND MESSAGE </button>
        </div>
    </div>

    <!--ABOUT-->
    <div class="about">
        <!--        上：标题与文字-->
        <div class="about-top">
            <div class="title" style="text-align: center">ABOUT</div>
            <div class="line"></div><br>
            <textarea cols="20" rows="3">Lorem Ipsum is simply dummy text of the printing and typesetting
industry.Lorem Ipsum has been the industry's standard dummy
  text ever since the 1500s.</textarea><br><br>
        </div>
        <!--        中：文字、图片-->
        <div class="about-middle">
            <div class="input1-word">
                A WORD <br> ABOUT US
            </div>
            <img src="images/bb3.jpg">

            <!--            遮罩层-->
            <div class="aboutLayer">
                <br/>
                <div class="input2"><br>
                    Praesent dignissim viverra est,sed<br>
                    bibendum ligula congue non.Sed ac nisl<br>
                    et feils gravida commodo?Suspendisse<br>
                    eget ullamcorper ipsum.Suspendisse<br>
                    diam amet.<br><br>
                    <button>EXPLORE</button>
                </div>
            </div>

            <div class="input3">
                <p>
                    <b style="font-size: 30px">70000</b><br><br>


                <hr width="30px" color="#07cbc9"/>
                <br>
                Students
                </p>
            </div>

            <div class="input4">

                <p>
                    <b style="font-size: 30px">600</b><br><br>
                <hr width="30px" color="#07cbc9"/>
                <br>
                Faculty
                </p>
            </div>
        </div>

        <!--下：文字与图片-->
        <div class="m-bottom">
            <div class="img1"><img src="images/b1.jpg"></div>
            <div class="ab-div1">
                <div class="library">Library</div>
                <div class="library1">Lorem Ipsum is simply dummy text of the <br> printing and typesetting industry</div>
                <div class="library2">Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknown printer took<br>a galley of type and scrambled it to make a type<br>specimen book.</div>
                <div class="btn11"><button>EXPLORE</button></div>
            </div>
            <div class="img2"><img src="images/b2.jpg"></div>


            <div class="img3"><img src="images/b3.jpg"></div>
            <div class="ab-div2">
                <div class="CL">Computer Lab</div>
                <div class="CL1">Lorem Ipsum is simply dummy text of the <br> printing and typesetting industry</div>
                <div class="CL2">Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknown printer took<br>a galley of type and scrambled it to make a type<br>specimen book.</div>
                <div class="btn22"><button>EXPLORE</button></div>
            </div>
            <div class="ab-div3">
                <div class="CH">Conference Hall</div>
                <div class="CH1">Lorem Ipsum is simply dummy text of the <br> printing and typesetting industry</div>
                <div class="CH2">Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknown printer took<br>a galley of type and scrambled it to make a type<br>specimen book.</div>
                <div class="btn33"><button>EXPLORE</button></div>
            </div>
            <div class="ab-div4">
                <div class="PG">Play Ground</div>
                <div class="PG1">Lorem Ipsum is simply dummy text of the <br> printing and typesetting industry</div>
                <div class="PG2">Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknown printer took<br>a galley of type and scrambled it to make a type<br>specimen book.</div>
                <div class="btn44"><button>EXPLORE</button></div>
            </div>
            <div class="img4"><img src="images/b4.jpg" ></div>
        </div>
    </div>


    <!--GALLERY部分-->
    <!--GALLERY上部分-->
    <div class="up">
        <div class="title">GALLERY</div>
        <div class="line"></div>
        <div class="word">Lorem Ipsum is simply dummy text of the printing and typesetting<br>industry.Lorem Ipsum has been the industry's standard dummy text<br>ever since the 1500s</div>
        <div class="img1"><img src="images/03-01.jpg" ></div>
        <div class="div1">
            <!--因为文字要占整个黑色框的中间部分，所以再分一个div出来padding-->
            <div class="SL">SCIENCE LAB</div>
        </div>
        <div class="img2"><img src="images/03-02.jpg"></div>
        <div class="div2">
            <div class="IS">INDOOR STADIUM</div>
        </div>
        <div class="img3"><img src="images/03-03.jpg"></div>
        <div class="div3">
            <div class="TT">TRANSPORTATION</div>
        </div>
        <div class="img4"><img src="images/03-04.jpg"></div>
        <div class="div4">
            <div class="KR">KIDS ROOM</div>
        </div>
        <div class="img5"><img src="images/03-05.jpg"></div>
        <div class="div5">
            <div class="MC">MEDITATION CLASSES</div>
        </div>
        <div class="img6"><img src="images/03-06.jpg"></div>
        <div class="div6">
            <div class="KPG">KIDS PLAY GROUND</div>
        </div>
    </div>
</div>

<!-- 页脚区-->
<div class="up">
    <div class="footer">
        <div class="word"> © 2016 imooc.com 京ICP备13046642号</div>
    </div>
</div>


</body>
</html>